import { fileURLToPath, URL } from "node:url";

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";

// elementPlus按需导入
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

const port = 80; // 端口
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  return {
    plugins: [
      vue(),
      // ...
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [
          // 1. 配置elementPlus采用sass样式配色系统
          ElementPlusResolver({ importStyle: "sass" }),
        ],
      }),
    ],

    // webpack-dev-server 相关配置
    server: {
      host: "0.0.0.0",
      port: port,
      open: true,
      proxy: {
        // detail: https://cli.vuejs.org/config/#devserver-proxy
        "/api": {
          target: env.VITE_PC_BASE_PATH,
          changeOrigin: true,
          // pathRewrite: {
          //   ["^" + env.VITE_PC_BASE_API]: "",
          // },
          rewrite: (path) => path.replace(/^\/api/, "/"),
        },
      },
      disableHostCheck: true,
    },
    resolve: {
      // 实际的路径转换  @  -> src
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          // 2. 自动导入定制化样式文件进行样式覆盖
          additionalData: `
          @use "@/styles/element/index.scss" as *;
          @use "@/styles/var.scss" as *;
        `,
        },
      },
    },
  };
});
